<template>
  <div class="wrapper">
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <div style="padding-bottom: 20px">
        <el-button type="primary" size="medium" @click="handleAdd" icon="el-icon-plus">
          新增角色
        </el-button>
      </div>

      <el-table style="width: 100%" :data="tableData" border stripe>
        <!-- <el-table-column prop="roleId" label="ID" align="center" width="70px" /> -->
        <el-table-column prop="roleName" label="角色名" align="center" />
        <el-table-column prop="description" label="角色描述" />
        <el-table-column label="操作" align="center">
          <template slot-scope="{ row }">
            <el-button type="warning" size="mini" @click="handleEdit(row)">编辑</el-button>
            <el-button type="success" size="mini" @click="assignPermissions(row)">
              分配权限
            </el-button>
            <el-button type="danger" size="mini" @click="handleRemove(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div style="text-align: center; margin-top: 20px">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="params.pageNum"
          :page-size="params.pageSize"
          :page-sizes="[5, 10, 15, 20]"
          layout="total, prev, pager, next, sizes"
          :total="total"
        ></el-pagination>
      </div>
    </el-card>

    <!-- 新增/修改弹窗 -->
    <RoleDialog
      :show.sync="showDialog"
      :editRow="editRow"
      @close="dialogClose"
      @reset="handleReset"
    />

    <AssignDIalog
      :show.sync="assignDialogShow"
      :treeData="treeData"
      :selectRow="selectRow"
      :defaultCheckedKeys="defaultCheckedKeys"
    />
  </div>
</template>

<script>
import { getRoleApi, deleteRoleApi, getCheckKeysApi } from '@/api/role'
import { getMenuApi } from '@/api/menu'
import RoleDialog from './components/roleDialog'
import AssignDIalog from './components/assignDIalog'
export default {
  components: { RoleDialog, AssignDIalog },
  data() {
    return {
      tableData: [],
      total: 0,
      params: {
        pageNum: 1,
        pageSize: 5
      },
      showDialog: false,
      assignDialogShow: false,
      editRow: {},
      selectRow: {},
      defaultCheckedKeys: [],
      treeData: []
    }
  },
  mounted() {
    this.getRoleList(this.params)
    this.getMenus()
  },
  methods: {
    async getMenus() {
      let res = await getMenuApi()
      if (res.success) {
        this.treeData = res.data
      }
    },
    async getCheckKeys(roleId) {
      let res = await getCheckKeysApi({ roleId })
      if (res.success && Array.isArray(res.data)) {
        this.defaultCheckedKeys = this.filterCheckKeys(res.data)
        // 成功再打开
        this.assignDialogShow = true
      }
    },
    filterCheckKeys(keys) {
      let keyList = []
      const filter = treeData => {
        treeData.forEach(menu => {
          if (Array.isArray(menu.children) && menu.children.length) {
            filter(menu.children)
          } else {
            if (keys.includes(menu.menuId)) {
              keyList.push(menu.menuId)
            }
          }
        })
      }
      filter(this.treeData)
      return keyList
    },
    assignPermissions(row) {
      this.selectRow = row
      this.defaultCheckedKeys = []
      this.getCheckKeys(row.roleId)
    },
    assignPermissionsClose() {
      this.selectRow = {}
      this.assignDialogShow = false
    },
    handleAdd() {
      this.showDialog = true
    },
    dialogClose({ update }) {
      this.editRow = {}
      update && this.getRoleList(this.params)
    },
    async getRoleList(params) {
      let res = await getRoleApi(params)
      if (res.success) {
        this.tableData = res.data.list
        this.total = res.data.total
      }
    },
    handleEdit(row) {
      this.editRow = row
      this.showDialog = true
    },
    handleRemove(row) {
      this.$confirm('<span style="color: red;">此操作不可逆！确定删除？</span>', '操作提示', {
        dangerouslyUseHTMLString: true,
        closeOnClickModal: false,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          let res = await deleteRoleApi({ roleId: row.roleId })
          if (res.success) {
            this.$message.success('删除成功！')
            this.getRoleList(this.params)
            return
          }
          this.$message.error('删除失败！')
        })
        .catch(() => {})
    },
    dialogClose({ update }) {
      update && this.getRoleList(this.params)
    },
    handleReset() {
      this.editRow = {}
    },
    handleSizeChange(val) {
      this.params.pageNum = 1
      this.params.pageSize = val
      this.getRoleList(this.params)
    },
    handleCurrentChange(val) {
      this.params.pageNum = val
      this.getRoleList(this.params)
    }
  }
}
</script>

<style lang="scss" scoped>
.wrapper {
  padding: 15px;
}
</style>
